<template>
	<!-- <main-content :otherDependenComponents="otherDependenComponents"> -->
	<!-- <template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item class="flex-row-container">
					<el-input
						v-model="queryData.userName"
						class="input-with-select"
						:placeholder="$t('common.please_enter')"
						clearable
						size="medium"
						style="width: 330px"
					>
						<el-select
							slot="prepend"
							v-model="queryData.userType"
							:placeholder="$t('common.please_choose')"
							style="width: 110px"
						>
							<el-option label="代理账号" :value="1"></el-option>
							<el-option label="会员账号" :value="0"></el-option>
						</el-select>
					</el-input>
				</el-form-item>
				<el-form-item
					label="账单周期"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.billEndDate"
						placeholder="请选择"
						style="width: 350px"
					>
						<el-option
							v-for="item in billDateList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item class="flex-row-container">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90750088')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template> -->
	<!-- <template slot="content"> -->
	<div v-loading="loading">
		<div class="mb20">
			本期账变金额汇总
			<span
				:style="
					handleNumberColor(detail.totalWalletReconciliationAmount)
				"
			>
				{{
					handleNumber(
						'USDT',
						detail.totalWalletReconciliationAmount,
						2,
						true,
						true
					)
				}}
			</span>
		</div>
		<div v-if="queryData.userType == '1'">
			<div class="flex-box">
				<h3>代理账变金额</h3>
				<el-button
					v-if="hasPermission('90750088')"
					type="warning"
					icon="el-icon-download"
					size="medium"
					class="export"
					:loading="exportBtnLoading"
					@click="handleExportExcel('agent')"
				>
					{{ $t('common.export') }}
				</el-button>
			</div>

			<AgencyAccount
				:tableLoading="loading"
				:tableData="tableData"
				:detail="detail"
				:name="queryData.userName"
				:userType="queryData.userType"
				type="agent"
				:columnsPlus="getAgentAccountColumnsPlus()"
				:columnsReduce="getAgentAccountColumnsReduce()"
			/>
		</div>

		<div>
			<div class="flex-box">
				<h3>会员账变金额</h3>
				<el-button
					v-if="hasPermission('90750088')"
					type="warning"
					icon="el-icon-download"
					size="medium"
					class="export"
					:loading="exportBtnLoading"
					@click="handleExportExcel('member')"
				>
					{{ $t('common.export') }}
				</el-button>
			</div>
			<AgencyAccount
				:tableLoading="loading"
				:tableData="tableData"
				:detail="detail"
				:name="queryData.userName"
				:userType="queryData.userType"
				type="member"
				:columnsPlus="getMemberAccountColumnsPlus()"
				:columnsReduce="getMemberAccountColumnsReduce()"
			/>
		</div>
	</div>
	<!-- </template>
	</main-content> -->
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import {
  getAgentAccountColumnsPlus,
  getAgentAccountColumnsReduce,
  getMemberAccountColumnsPlus,
  getMemberAccountColumnsReduce

} from './components/columns'
// import MainContent from '@/components/MainContent/index.vue'
import AgencyAccount from './components/agencyAccount'
export default {
  components: {
    // MainContent,
    AgencyAccount
  },
  mixins: [list],
  props: {
    searchData: {
      type: Object,
      default: () => { }
    },
    billDateList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dayjs,
      getAgentAccountColumnsPlus,
      getAgentAccountColumnsReduce,
      getMemberAccountColumnsPlus,
      getMemberAccountColumnsReduce,
      tableHeight: 480,
      otherDependenComponents: [],
      queryData: {
        merchantId: '',
        userType: 1,
        userName: '',
        billEndDate: ''
      },
      tableData: [],
      //   billDateList: [],
      loading: false,
      exportBtnLoading: false,
      detail: {}
    }
  },
  watch: {
    searchData: {
      handler(val) {
        this.queryData = val
      },
      immediate: true,
      deep: true
    },
    'searchData.userType'(val) {
      this.queryData = {
        ...this.queryData,
        userType: val
      }
      this.loadData()
    }

  },
  mounted() {
    // this.getSettlementBillTimeList()
  },
  methods: {
    forceUpdate(value) {
      this.$forceUpdate()
      this.queryData.userName = this.queryData.userName.replace(
        /[^A-Za-z0-9]/g,
        ''
      )
    },
    // getSettlementBillTimeList() {
    //   this.loading = true
    //   const params = {
    //     pageNum: 1,
    //     pageSize: 200,
    //     periodType: 6
    //   }
    //   this.$api
    //     .proxyTeamBillPeriod(params)
    //     .then((res) => {
    //       this.loading = false
    //       if (res?.code === 200) {
    //         const { record } = res?.data
    //         this.billDateList = record.map(
    //           (item, index) => {
    //             const startTime = dayjs(String(item.periodStDate)).format('YYYY-MM-DD') + ' 00:00:00'
    //             const endTime = dayjs(String(item.periodEnDate)).format('YYYY-MM-DD') + ' 23:59:59'
    //             return {
    //               code: index,
    //               description: `${startTime} 至 ${endTime}`,
    //               periodStDate: item.periodStDate,
    //               periodEnDate: item.periodEnDate,
    //               periodStStr: startTime,
    //               periodEnStr: endTime
    //             }
    //           }
    //         )
    //         this.queryData.billEndDate = 0
    //       }
    //     })
    //     .catch(() => {
    //       this.loading = false
    //     })
    // },
    loadData() {
      if (!this.billDateList.length) return
      if (!this.queryData.merchantId) {
        this.$message.warning('请选择商户')
        return
      }
      if (!this.queryData.userName) {
        if (this.queryData.userType == '0') {
          this.$message.warning('请先输入会员账号')
        } else if (this.queryData.userType == '1') {
          this.$message.warning('请先输入代理账号')
        }
        return
      }

      const params = {
        ...this.queryData,
        ...this.getParams()
      }
      params.cycleEndDate = this.billDateList[this.queryData.billEndDate].periodEnDate
      params.cycleStartDate = this.billDateList[this.queryData.billEndDate].periodStDate
      if (!params.userName) {
        delete params.userType
        delete params.userName
      }
      delete params.billEndDate
      this.loading = true
      if (this.queryData.userType == '0') {
        this.$api
          .reportCreditBillTeamBillChangeQueryMemberBillListPage(params)
          .then((res) => {
            this.loading = false
            if (res.code === 200) {
              this.detail = res.data || {}
              this.tableData = res?.data ? [res.data] : []
            }
          })
          .catch(() => {
            this.loading = false
          })
      } else if (this.queryData.userType == '1') {
        this.$api
          .reportCreditBillTeamBillChangeQueryProxyBillListPage(params)
          .then((res) => {
            this.loading = false
            if (res.code === 200) {
              this.tableData = []
              this.detail = res.data || {}
              this.tableData = res?.data ? [res.data] : []
            }
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.loading = false
        this.tableData = []
        return
      }
    },
    search() {
      this.loadData()
    },
    reset() {
      this.queryData = {
        merchantId: '',
        billEndDate: this.billDateList.length > 1 ? 0 : '',
        userType: 1,
        userName: ''
      }
      this.loadData()
    },
    handleExportExcel(type) {
      if (!this.billDateList.length) return
      if (!this.queryData.merchantId) {
        this.$message.warning('请选择商户')
        return
      }
      if (!this.queryData.userName) {
        if (this.queryData.userType == '0') {
          this.$message.warning('请先输入会员账号')
        } else if (this.queryData.userType == '1') {
          this.$message.warning('请先输入代理账号')
        }
        return
      }
      const params = {
        ...this.queryData,
        ...this.getParams()
      }
      params.cycleEndDate = this.billDateList[this.queryData.billEndDate].periodEnDate
      params.cycleStartDate = this.billDateList[this.queryData.billEndDate].periodStDate
      if (!params.userName) {
        delete params.userType
        delete params.userName
      }
      delete params.billEndDate
      this.exportBtnLoading = true
      if (this.queryData.userType == '0') {
        this.exportExcelPublic({
          api: 'reportCreditBillTeamBillChangeQueryMemberBillListPageExport',
          params
        }).finally(() => {
          this.exportBtnLoading = false
        })
      } else if (this.queryData.userType == '1') {
        if (type === 'agent') {
          this.exportExcelPublic({
            api: 'reportCreditBillTeamBillChangeQueryProxyBillListPageExport',
            params
          }).finally(() => {
            this.exportBtnLoading = false
          })
        } else if (type === 'member') {
          this.exportExcelPublic({
            api: 'reportCreditBillTeamBillChangeQueryMemberBillListPageExport',
            params
          }).finally(() => {
            this.exportBtnLoading = false
          })
        }
      } else {
        this.exportBtnLoading = false
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
.input-with-select {
	width: 110px;
}
.ptop {
	padding-top: 2px;
	margin-left: 10px;
}
::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
.mb20 {
	margin-bottom: 20px;
}
.flex-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.export {
		height: 36px;
	}
}
</style>
